// 创建一个路由器并暴露出去

// 1.引入createRouter
import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from "vue-router";
// 引入路由路由组件
import About from "@/pages/About.vue";
import Home from "@/pages/Home.vue";
import News from "@/pages/News.vue";
import Detail from "@/pages/Detail.vue";

// 2.创建路由器
const router = createRouter({
  // 设置路由器的工作模式
  history: createWebHistory(), // history模式
  // history: createWebHashHistory(), // hash模式
  routes: [
    {
      name: "zhuye",
      path: "/home",
      component: Home,
    },
    {
      name: "xinwen",
      path: "/news",
      component: News,
      // 嵌套路由使用children配置项
      children: [
        {
          name: "xiangqing",
          path: "detail",
          // path: "detail/:id/:title/:content?",
          component: Detail,

          // props配置项就是将收到的参数作为props方式传递给路由组件(路由组件不使用标签不能直接传递props)

          // 第一种写法：将路由收到的所有params参数以props形式传递给路由组件
          // props: true, // 只能用于params参数 (传递params参数推荐写法)

          // 第二种写法：可以自定义将query/params参数传递给路组件(通用)
          props(route) {
            // 函数写法,可以接受到route对象,return一个对象作为props传递给路由组件
            return {
              id: route.query.id,
              title: route.query.title,
              content: route.query.content,
            };
          },

          // 第三种写法：对象写法,自定义props数据(死数据，基本不用)
          /* props: {
            id: "0001",
            title: "标题1",
            content: "内容1",
          }, */
        },
      ],
    },
    {
      name: "guanyu",
      path: "/about",
      component: About,
    },
  ],
});

// 3.将路由器暴露
export default router;
